<template>
	<view class="page">
		<MenusCard :data="currentWeekMenus" @pick="onSetMenu"></MenusCard>
		<view class="gap"></view>
		<MenusCard :data="nextWeekMenus" next-week @pick="onSetMenu"></MenusCard>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';

import { useMenuApis } from '../../request/menu.api';

const menuApis = useMenuApis();

const currentWeekMenus = ref([]);
const nextWeekMenus = ref([]);

onShow(() => {
	menuApis.getWeeksMenu().then((data) => {
		currentWeekMenus.value = data.slice(0, 7);
		nextWeekMenus.value = data.slice(-7);
	});
});

const onSetMenu = (date) => {
	console.log('setMenu', date);
	uni.navigateTo({
		url: '/pages/set-menu/set-menu' + `?date=${date}`,
	});
};
</script>

<style scoped>
.page {
	width: 100%;
	height: 100%;
	padding: 24rpx;

	overflow: auto;

	/* 从上到下的渐变，默认方向 */
	background: linear-gradient(rgba(64, 162, 255, 0.5), rgba(255, 255, 255, 1));
}

.gap {
	height: 24rpx;
}
</style>
